<script setup lang="ts">
import { Empty } from '~comp/suspense';

const [inviteGameQry] = useFilterInfiniteQuery(apis.apiActivityInviteUsers, {
  page_size: {
    value: 20,
  },
});
</script>

<!-- 邀请列表 -->
<template>
  <div class="mt-1">
    <p v-if="$bp.tabletl" class="mb-1 flex text-sys-text-body">
      <i class="i-material-symbols:circle?mask mr2 bg-brand" />
      {{ $t('1DCgt5ZaXm8Ma4CWgyDp') }}
    </p>
    <div>
      <div class="grid grid-cols-[1fr_auto_1fr] pr-2 text-sys-text-body lt-tabletl:text-sm">
        <span>{{ $t('vSWndcqBgbF9tlnzy6ZR') }}</span>
        <span>{{ $t('0vtXdkqCewwMhiUxQuk4s') }}</span>
        <span class="text-end">
          {{ $t('eLMeNnYVjOjP2EkpHKxv') }}
          <THelptip class="text-sys-text-body">
            {{ $t('r4mIxQ6EeuBh92ZliTNcb') }}
          </THelptip>
        </span>
      </div>
      <div class="grid grid-cols-[1fr_auto_1fr] max-h-[124px] flex-1 overflow-hidden overflow-y-auto py-2">
        <TInfiniteQuery class="col-span-full mt-3" :querier="inviteGameQry" :scrollLoad="true">
          <template #default="{ item }">
            <div>
              {{ $d(item.create_time) }}
            </div><div>
              {{ item.nickname }}
            </div>
            <div class="text-end">
              <i v-if="item.help_status === 2" class="i-majesticons:check-line text-6.5 text-green-500" />
              <i v-else class="i-material-symbols:close-small-rounded text-6.5 text-sys-text-body" />
            </div>
          </template>
          <template #empty>
            <div class="grid place-content-center">
              <Empty class="!py-0">
                <span>{{ $t('arNjLgUDc6JaG6UAvKb5') }}</span>
              </Empty>
            </div>
          </template>
        </TInfiniteQuery>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
